<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			padding: 20px;
		}
		ul{
			width: 40%;
			display: inline-block;
		}
		ul li{
			list-style: none;
		}
		.header{
			    width: 100%;
			    font-size: 32px;
			    text-align: center;
			    line-height: 200px;
			    background: #ddd;
		}
		.main{
			width: 100%;
		    height: 100px;
		    padding: 30px 0;
		}
		.name{
			height: 40px;
			width: 24%;
			padding-left: 10px;
			font-size: 16px;
		}
		.main select{
			width: 24%;
			margin-left: 2%;
			padding-left: 2%;
			height: 40px;
		}
		.old{
			height: 40px;
			width: 24%;
			margin-left: 2%;
			padding-left: 10px;
			font-size: 16px;
		}
		.main form{
			    text-align: center;
		}
		.main button{
			margin-left: 5%;
			width: 80px;
			height: 40px;
		}
		.footer{
			width: 100%;
		}
		.foot-t{
			width: 100%;
			padding: 0 40% 0 0;
			/*padding: 20px;*/
   			/*border: 1px solid;*/
		}
		.foot-t p{
			display: inline-block;
			width: 33%;
			/*text-align: center;*/
			line-height: 50px;
			font-size: 28px;
			/*border: 1px solid #ccc;
			border-left: 0;*/
		}
		.footer{
			padding: 0 40% 0 0;
			/*margin: ;*/
			height: 270px;
			overflow-x:hidden;
			overflow-y:auto;
		}
		.footer tr{
			display: block;
			width: 100%;
			height: 35px;
			/*border: 1px solid #ddd;*/
			margin-top: 20px;
		}
		.footer tr td{
			
			
			display: inline-block;
			width: 33%;
			line-height: 35px;
			font-size: 20px;
			
		}
	</style>
</head>
<body>
	<div class="header">
		学员信息
	</div>
	<div class="main">
		<form action="#">
			<input class="name" type="text" id="n" placeholder="姓名"/>
			<select id="s">
				<option>小子蛋子</option>
				<option>丫头片子</option>
				<option>未知</option>
				<option>公主</option>
				<option>公子</option>
				<option>小男孩</option>
				<option>小女孩</option>
			</select>
			<input class="old" type="number" id="a" placeholder="年龄"/>
			<button id="btn">提交</button>
		</form>
	</div>
	<div class="foot-t">
			<p class="btn1" id="">姓名</p><p class="btn2" id="">性别</p><p class="btn3" id="">年龄</p>
		</div>
	<div class="footer" id="foot">
		
	</div>
	<script>
		function xj(){
			var xmlhttp;
			if (window.XMLHttpRequest)
			{
				//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
				xmlhttp=new XMLHttpRequest();
			}
			else
			{
				// IE6, IE5 浏览器执行代码
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
				if (xmlhttp.readyState==4 && xmlhttp.status==200){
					var json = JSON.parse(xmlhttp.responseText)
					console.log(json)
					document.querySelector("#foot").innerHTML=""
					for(var i = 0;i<json.data.length;i++){
						var tr = document.createElement("tr")
						var name = document.createElement("td")
						name.innerHTML = json.data[i].studentName;
						var sex = document.createElement("td")
						sex.innerHTML = json.data[i].sex;
						var age = document.createElement("td")
						age.innerHTML = json.data[i].age;
						tr.appendChild(name)
						tr.appendChild(sex)
						tr.appendChild(age)
						document.querySelector("#foot").appendChild(tr)
					}
				}
			}
			xmlhttp.open("GET","http://localhost/ajaxapi/public/index.php/index/student/student",true);
			xmlhttp.send();
		}
		
		document.querySelector("#btn").addEventListener("click", function(){
			var n = document.querySelector("#n").value;
			console.log(n)
			var s = document.querySelector("#s").value;
			console.log(s)
			var a = document.querySelector("#a").value;		
			console.log(a)
			
			
			

		var xmlhttp;
		if (window.XMLHttpRequest)
		{
			//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			xmlhttp=new XMLHttpRequest();
		}
		else
		{
			// IE6, IE5 浏览器执行代码
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
					var json = JSON.parse(xmlhttp.responseText)
					console.log(json)
				xj()
				n.value = "";
				a.value = "";
			}
		}
		//"http://localhost/ajaxapi/public/index.php/index/student/student"
		xmlhttp.open("GET","http://localhost/ajaxapi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
		xmlhttp.send();
		})
		xj()
	</script>
</body>
</html>